<template>
  <div id="app">
    <router-view></router-view>
    <router-view name="footer"></router-view>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss">
html,body,ul,li,h3,h1,h2,h4{
  margin: 0;padding: 0;
  list-style: none;
}
// 假设iPhoneX作为设计稿
//   1080*1920
//   dpr倍数:3
//   css像素:375*812
//   vw作为基准单位:1px = (100/375)vw
//   为了方便计算,将根元素的font-size设置为100像素的vw
//   font-size:(100/375)*100vw
//   font-size:26.666666666666668vw
html{
  font-size: 26.666666666666668vw;
  height: 100%;
}
// 横竖屏的处理方式
@media all and (orientation:landscape){
    html{font-size:100px;}
}
// 为了修正真正的文字的大小给body设置初始默认的font-size
body{
  font-size: 16px;
  height: 100%;
}
// 在iphoneX下,此时的1rem = 100px

#app{
  display: flex;
  flex-direction: column;
  height: 100%;
  .box{
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    .header{
      height: 0.46rem;
      background: #f33;
      text-align: center;
      font: 0.24rem/0.46rem "";
    }
    .content{
      flex: 1;
      overflow: auto;
    }
  }
  .footer{
    height:0.6rem;
    text-align: center;
    font-size: 14px;
    ul{
      background: #eee;
      height: 100%;
      display: flex;
      li{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        &.router-link-exact-active{
          background: #f55;
          color: #fff;
        }
        .iconfont{
          font-size: 26px;
        }
      }
    }
  }
}
</style>
